<template>
  <view class="y Layout">
    <scroll-view class="oh fg1" :scrollX="scrollX" :scrollY="scrollY" :upperThreshold="upperThreshold"
      :lowerThreshold="lowerThreshold" :scrollTop="scrollTop" :scrollLeft="scrollLeft" :scrollIntoView="scrollIntoView"
      :scrollWithAnimation="scrollWithAnimation" :enableBackToTop="enableBackToTop" :showScrollbar="showScrollbar"
      :refresherEnabled="refresherEnabled" :refresherThreshold="refresherThreshold"
      :refresherDefaultStyle="refresherDefaultStyle" :refresherBackground="refresherBackground"
      :refresherTriggered="refresherTriggered" :enableFlex="enableFlex" :scrollAnchoring="scrollAnchoring"
      @scrolltoupper="emit('scrolltoupper')" @scrolltolower="emit('scrolltolower')" @scroll="emit('scroll')"
      @refresherpulling="emit('refresherpulling')" @refresherrefresh="emit('refresherrefresh')"
      @refresherrestore="emit('refresherrestore')" @refresherabort="emit('refresherabort')">
      <slot name="default" />
    </scroll-view>
    <!-- <view class="x nsx za bar">
      <view class="barItem" v-for="(i, ii) in data" :key="ii" :class="cls(i)" @click="click(i)">{{ i.name }}</view>
    </view> -->
  </view>
</template>
<script lang="ts" setup>
  // import { ref, computed } from "vue";
  withDefaults(defineProps<{
    scrollX?: boolean;
    scrollY?: boolean;
    upperThreshold?: number | string; //	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件	
    lowerThreshold?: number | string; // 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 
    scrollTop?: number | string; // 设置竖向滚动条位置 
    scrollLeft?: number | string; // 设置横向滚动条位置 
    scrollIntoView?: string; // 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 
    scrollWithAnimation?: boolean; // false 在设置滚动条位置时使用动画过渡 
    enableBackToTop?: boolean; // false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 appNvue，微信小程序
    showScrollbar?: boolean; // false 控制是否出现滚动条 AppNvue 2.1.5+
    refresherEnabled?: boolean; // false 开启自定义下拉刷新 H5、appVue 2.5.12+,微信小程序基础库2.10.1+
    refresherThreshold?: number; // 45 设置自定义下拉刷新阈值 H5、appVue 2.5.12+,微信小程序基础库2.10.1+
    refresherDefaultStyle?: string; // "black" 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 H5、appVue 2.5.12+,微信小程序基础库2.10.1+
    refresherBackground?: string; // "#FFF" 设置自定义下拉刷新区域背景颜色 H5、appVue 2.5.12+,微信小程序基础库2.10.1+
    refresherTriggered?: boolean; // false 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 H5、appVue 2.5.12+,微信小程序基础库2.10.1+
    enableFlex?: boolean; // false 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 微信小程序 2.7.3
    scrollAnchoring?: boolean;
  }>(), { scrollY: true });
  const
  //   data = ref([
  //   { path: "pages/index", name: "首页", cls: "mac-ico-home", active: "mac-ico-home-fill" },
  //   { path: "pages2/classify", name: "分类", cls: "mac-ico-apps", active: "mac-ico-apps-fill" },
  //   { path: "pages2/cart", name: "购物车", cls: "mac-ico-cart", active: "mac-ico-cart-fill" },
  //   { path: "pages2/my", name: "我的", cls: "mac-ico-my", active: "mac-ico-my-fill" },
  // ]),
  //   pages = getCurrentPages(),
  //   page = computed(() => {
  //     return pages.length ? pages[pages.length - 1] : undefined;
  //   }),
  //   cls = computed(() => {
  //     return (p: { path: string; name: string; cls: string; active: string; }) => {
  //       const pg = (page.value?.route || "").toLowerCase();
  //       if (pg) {
  //         const i = pg.indexOf(p.path);
  //         if (!i) {
  //           return [p.active, "active"];
  //         }
  //       }
  //       return p.cls;
  //     };
  //   }),
    emit = defineEmits<{
      (e: "scrolltoupper"): void;
      (e: "scrolltolower"): void;
      (e: "scroll"): void;
      (e: "refresherpulling"): void;
      (e: "refresherrefresh"): void;
      (e: "refresherrestore"): void;
      (e: "refresherabort"): void;
    }>();

  // function click(p: typeof data.value[number]) {
  //   if (p.path === data.value[0].path) {
  //     uni.reLaunch({ url: `/${p.path}` });
  //   } else {
  //     uni.navigateTo({ url: `/${p.path}` });
  //   }
  // }
</script>
<style lang="scss" scoped>
  page, .Layout {
    width: 100%;
    height: 100%;
    padding-bottom: 0.4em;
    >.bar {
      position: relative;
      margin-bottom: 0.4em;
      >.barItem {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        &::before {
          font-size: 2em;
        }
      }
      >.active {
        color: #409eff;
      }
    }
  }
</style>